<template xmlns="http://www.w3.org/1999/html">
    <div class="container">
        <top-bar class="search-container"
                 :title="title" rightButton=""></top-bar>
        <scroller :style="{height: contentHeight+'px'}">
            <div class="content" v-if="bookInfo">
                <div class="book-wrap row">
                    <div class="book-image">
                        <image class="image" :src="bookInfo.cover | getImageUrl"></image>
                    </div>
                    <div class="book-info">
                        <text class="title margin-bottom">{{bookInfo.title}}</text>
                        <div class="rating row" v-if="bookInfo.rating">
                            <text class="rating-score">{{bookInfo.rating.score.toFixed(1)}}</text>
                            <start class="rating-start" :current="bookInfo.rating.score"></start>
                            <text class="rating-count text">{{bookInfo.rating.count | countFilter}}人评</text>
                        </div>
                        <div class="other-info-3 row margin-bottom">
                            <text class="author">{{bookInfo.author}}</text>
                            <text class="text cat">{{bookInfo.cat}}</text>
                        </div>
                        <div class="other-info-4 row">
                            <text class="wordCount text">{{bookInfo.wordCount | countFilter}}字</text>
                            <text class="state text">{{ bookInfo.isSerial ? '完结' : '连载中'}}</text>
                        </div>
                    </div>
                </div>
                <div class="book-info-more row">
                    <div class="popularity al-center">
                        <text class=" big-text">{{ (bookInfo.latelyFollower || "0") | countFilter}}</text>
                        <text class="text">追书人气</text>
                    </div>
                    <div class="keep al-center">
                        <text class=" big-text">{{ (bookInfo.retentionRatio || "0.0")}}%</text>
                        <text class="text">读者存留</text>
                    </div>
                    <div class="keep al-center">
                        <text class=" big-text">{{ (bookInfo.serializeWordCount || '0')}}</text>
                        <text class="text">日更新字</text>
                    </div>
                </div>
                <div class="book-border">&nbsp;</div>

                <div class="book-chapter row mar-t" @click="getChapter">
                    <text>目录</text>
                    <text class="book-chapter-text">{{bookInfo.lastChapter}}</text>
                </div>
                <div class="book-border">&nbsp;</div>


                <div class="book-longIntro mar-t">
                    <text class="longIntro-name mar-t">简介</text>
                    <div @click="longIntroMore">
                        <text class="longIntro-content mar-t" :style="{lines: longIntroLines}">{{bookInfo.longIntro}}</text>
                    </div>
                </div>
                <div class="book-border">&nbsp;</div>

            </div>
            <div class="footer">
                <div class="add-button row">
                    <div class="addOrRemove al-center" @click="addOrRemove">
                        <text class="addOrRemove-text">{{ isChase ?'- 不追了':'+ 追更新'}}</text>
                    </div>
                    <div class="read al-center" @click="read">
                        <text class="read-text">开始阅读</text>
                    </div>
                </div>
            </div>
        </scroller>
        <wxc-loading :show="isShow" ></wxc-loading>
    </div>
</template>

<script>

    import {author_icon, getImageUrl} from '../baseConfig';
    import {SHELF_BOOK,HISTORY_BOOK} from '../store/mutation-types';
    import {SET_BOOK,SET_CUR_BOOK,SET_HISTORY_BOOK} from '../store/mutations';
    import TopBar from '../components/bar/TopBar';
    import Start from '../components/book/Start';
    import {book_info} from '../store/actions';
    import {getCache,setCache} from '../util/storageUtils';
    import {Utils, WxcLoading} from 'weex-ui'
    import {getRealScreenHeight} from '../util/Config'

    export default {
        name: "book-info",
        components: {TopBar, Start, WxcLoading},
        data() {
            return {
                value: '',
                useDefaultReturn: false,
                bookInfo: undefined,
                title: '',
                author_icon: author_icon,
                curBook: {
                    readChapter: 0,
                    sort: false,
                    isInShelf: false,
                },
                isChase: false,
                selfBook: {},
                historyBook: {},
                bookId: 0,
                longIntroLines: 3,
                isLongIntroMore: true,
                contentHeight: 1344,
                isShow: false,
            }
        },
        mounted() {
            this.isShow = true;
            this.bookId = this.$route.query.bookId || '';
            this.contentHeight = getRealScreenHeight(Utils) - 90;
            console.log(this.bookId);
            getCache(SHELF_BOOK).then(value =>{
                this.selfBook = JSON.parse(value) || {};
                let temp = this.selfBook[this.bookId];
                if (temp) {
                    this.isChase = true;
                    this.curBook.readChapter = temp.readChapter;
                    this.curBook.isInShelf = true;
                    this.curBook.sort = temp.sort;
                    this.selfBook[this.bookId] = this.curBook;
                }
            });
            getCache(HISTORY_BOOK).then( value => {
                this.historyBook = JSON.parse(value) || {};
                let temp = this.historyBook[this.bookId];
                if (temp) {
                    this.curBook.readChapter = temp.readChapter;
                    this.curBook.sort = temp.sort;
                    this.historyBook[this.bookId] = this.curBook;
                }
            });
            book_info({
                bookId: this.bookId,
                callback: value => {
                    this.bookInfo = value;
                    this.title = this.bookInfo['title'];
                    this.curBook._id = this.bookId;
                    this.curBook.title = this.bookInfo.title;
                    this.curBook.cover = this.bookInfo.cover;
                    this.curBook.author = this.bookInfo.author;
                    this.curBook.lastChapter = this.bookInfo.lastChapter;
                    this.curBook.updated = this.bookInfo.updated;
                    SET_CUR_BOOK(this.curBook);
                    this.historyBook[this.bookId] = this.curBook;
                    setCache(SHELF_BOOK,this.selfBook);
                    setCache(HISTORY_BOOK,this.historyBook);
                },
                after: () => {
                    this.isShow = false;
                },
            });
        },
        methods: {
            addBook() {
                this.curBook.isInShelf = true;
                this.selfBook[this.bookId] = this.curBook;
                SET_BOOK(this.selfBook);
            },
            removeBook() {
                this.curBook.isInShelf = false;
                delete this.selfBook[this.bookId];
                SET_BOOK(this.selfBook);
            },
            addOrRemove() {
                this.isChase = !this.isChase;
                if (this.isChase) {
                    this.addBook();
                } else {
                    this.removeBook();
                }
                this.storeBook();
            },
            storeBook(){
                setCache(SHELF_BOOK,this.selfBook);
            },
            longIntroMore() {
                this.isLongIntroMore = !this.isLongIntroMore;
                if (this.isLongIntroMore) {
                    this.longIntroLines = 3;
                } else {
                    this.longIntroLines = 100;
                }
            },
            getChapter() {
                this.$router.push({name: 'bookCatalog', query: {bookId: this.bookId}})
            },
            read(){
                this.$router.push({name: 'read', query: { bookId: this.bookId}});
            }
        },
        filters: {
            getImageUrl: getImageUrl,
            countFilter: function (count) {
                if (count > 10000) {
                    return (count / 10000).toFixed(1) + '万';
                }
                return count;
            }
        }
    }

</script>

<style scoped>

    .container {
        position: fixed;
        width: 750px;
        /*兼容H5异常*/
        z-index: 99999;
    }
    .content {
        padding: 20px;
    }

    .row {
        flex-direction: row;
    }

    .author,
    .keep,
    .popularity {
        font-size: 24px;
        color: #666666;
    }

    .book-wrap {
        font-size: 12px;
    }

    .book-info {
        flex: 2;
        padding: 10px 20px 0 16px;
    }

    .margin-bottom {
        margin-bottom: 20px;
    }

    .image {
        width: 182px;
        height: 230px;
    }

    .book-info {
        flex: 2;
    }

    .title {
        font-weight: 400;
        font-size: 32px;
    }

    .author {
        color: #d81e06;
        font-size: 28px;
    }

    .keep {
        color: #4284ed;
        border-color: #4284ed;
    }

    /* 评价 */
    .rating {
        align-items: center;
    }

    .rating-score {
        color: #ffbf10;
    }

    .rating-start {
        margin-top: -5px;
        margin-left: 20px;
    }

    .vertical-line {
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #666666;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .rating-count {
        margin-left: 20px;
        font-size: 26px;
    }

    .text {
        color: #999999;
    }

    /* 第三行 */
    .other-info-3 {
        margin-top: 20px;
        align-items: center;
    }

    .cat {
        font-size: 26px;
        margin-left: 20px;
    }

    /* 第四行 */
    .wordCount, .state {
        font-size: 28px;
    }

    .state {
        margin-left: 20px;
    }

    /* 其他信息 */
    .book-info-more {
        margin-top: 30px;
    }

    .big-text {
        font-size: 26px;
        font-weight: bold;
        color: #666666;
    }

    .al-center {
        flex: 1;
        align-items: center;
    }

    .popularity,
    .keep {
        flex: 1;
    }

    .book-border {
        height: 1px;
        margin-top: 30px;
        border-bottom-color: #999999;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }

    .mar-t {
        margin-top: 30px;
    }

    /* 章节 */
    .book-chapter {
        justify-content: space-between;
    }

    /* 简介 */
    .longIntro-name {
        font-size: 38px;
        font-weight: bold;
    }

    .longIntro-content {
    }

    .footer {
        position: fixed;
        left: 0px;
        bottom: 20px;
        width: 750px;
    }

    .addOrRemove,
    .read {
        height: 80px;
        margin-left: 20px;
        margin-right: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex: 1;
    }

    .addOrRemove {
        background-color: pink;
    }

    .addOrRemove-text {
        color: #d81e06;
    }

    .read {
        background-color: #d81e06;
    }

    .read-text {
        color: #ffffff;
    }
</style>